<template>
    <P class="breadcrumb">
        <span>首页</span>
        <span class="margin-lr-10p">></span>
        <span>个人中心</span>
        <span class="margin-lr-10p">>></span>
        <span>打印准考证</span>
    </P>
    <div class="content">
        <div style="border: 1px solid #c9c9c9;">
            <div class="msg">
                <p>2024年5月18日AFM全国统一考试</p>
                <ul>
                    <li><b>准考证号：</b> xxxxxxxxxx</li>
                    <li><b>姓名：</b> 詹</li>
                    <li><b>身份证号：</b>xxxxxxxx</li>
                    <li><b>考点：</b>线上</li>
                    <li><b>座位号：</b>20</li>
                    <li><b>地址：</b>xxxxxxxxxxxxxxxxxxx</li>
                </ul>
            </div>
            <el-table :data="tableData" border style="width: 100%" v-show="!isPay">
                <el-table-column prop="date" label="考试科目" center />
                <el-table-column prop="name" label="考试日期" />
                <el-table-column prop="address" label="考试时间" />
            </el-table>
            <p class="title">考场规章</p>
            <ul class="guiZhang">
                <li>
                    1.凭本人准者证和有效身份证件进入指定的考场，无身份证的应考人不得入场，应考人的姓名和身份证信息必须光全匹配。并将身份证体放在考赢右上角，以备监考人随时核查。
                </li>
                <li>2.迟到30分钟以上的应专人不得入场专试，专试开始后30分钟内不得交学出场，</li>
                <li>3、应书人只准济带丽色钢笔或水笔以及维定的财务计算器进入考场，只能使用专试的员会指定的证</li>
                <li>4、考试开始前不得扫网试程。</li>
                <li>5.将手机、都能手表或任同电子设备放在监考人指示的位置。</li>
                <li>6.应书人须按要求，在首县卡指定位置填涂首高，写在其它任同始方均无效。</li>
            </ul>
        </div>

    </div>
</template>
<script setup>
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
</script>
<style scoped lang='less'>
.breadcrumb {
    width: 1300px;
    text-align: left;
    margin: 0 auto;
    padding: 0;
    font-size: 14px;
    line-height: 15px;
    color: #999;
    margin: 20px auto 18px;
}

.content {
    width: 60%;
    height: 60%;
    box-sizing: border-box;
    padding: 60px;
    background-color: #fffFFF;
    margin: auto;

    >ul {
        li {
            margin-top: 15px;
        }
    }
}

.text-center {
    text-align: center;
}

.guiZhang {
    padding: 15px;

    li:not(:first-child) {
        margin-top: 15px;
    }
}

.msg {

    p {
        margin-top: 15px;
        font-size: 28px;
        text-align: center;
        font-weight: bold;
    }

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 40px;

        li {
            width: 50%;
        }

        li:nth-child(n+2) {
            margin-top: 10px;
        }

        ;

        li:nth-child(2),
        li:nth-child(4) {
            width: 35%;
        }

        li:last-child {
            width: 100%;
        }

    }
}

:deep(thead .el-table .cell) {
    line-height: 30px;
    text-align: center;
    font-size: 18px;
}

:deep(thead tr th) {
    background: #345aa3 !important;
    ;
    color: #ffffff;
    font-size: 18px;
}

:deep(.el-table .cell) {
    line-height: 35px;
}

.title {
    background: #345aa3 !important;
    ;
    color: #ffffff;
    font-size: 18px;
    height: 46px;
    line-height: 46px;
    text-align: center;
}

:deep(.el-table tr) {
    background-color: #ffffff;
}

:deep(.el-table__body) {
    background-color: #ffffff;
}

/* 设置表头文字居中 */
:deep(.el-table__header th) {
    text-align: center;
}

/* 设置表格内容文字居中 */
:deep(.el-table__body td) {
    text-align: center;
}

:deep(.el-table__cell) {
    border-color: #e9e9ee;
}
</style>